 <div class="menu" id='menu' v-cloak>

  <div class="menu-search">
    <div class="menu-search-form">
      <input class="menu-search-input form-control" type="text" v-model="filterText" autocomplete="off" placeholder="菜单检索">
    </div>
    <div v-if="filterText.length" class="menu-search-result">
      <div class="menu-search-result-title">搜索结果</div>
      <ul v-if="filterResults.length" class="menu-search-result-wrap">
        <li v-for="filterResult in filterResults" class="menu-search-result-item">
          <a :href="filterResult.clientUrl" @click="activeMenu($event, filterResult)">
            <i v-if="filterResult.iconCls" class="icon iconfont" :class="filterResult.iconCls"></i>
            <span v-html="filterResult.menuName"></span>
          </a>
        </li>
      </ul>
      <p v-if="!filterResults.length && filterText.length" class="text-center">没有结果:(</p>
    </div>
  </div>
  
  <ul class="menu-wrap" v-if="!filterText.length" id='menu-nav'>
    <li class="menu-item" v-for="menu in menus" :class="{active: menu.active}">
      <a :href="menu.clientUrl || '#'" @click="toggleMenu($event, menu)">
        {{ menu.menuName }}
      </a>
      <div class="menu-drop" v-if="menu.children && menu.children.length">
        <ul class="menu-drop-wrap">
          <li class="menu-drop-item" v-for="sub in menu.children" :class="{active: select === sub.id}">
            <a :href="sub.clientUrl || '#'" @click="activeMenu($event, sub)">
              <i v-if="sub.iconCls" class="icon iconfont" :class="sub.iconCls"></i>
              <span>{{ sub.menuName }}</span>
            </a>
          </li>
        </ul>
      </div>
    </li>
  </ul>

</div>